React学习20220313 Hook
React学习20220313 Hook
理解Hook
按我的理解,Hook是对繁琐,学习曲线长,难以更改中间步骤的类的拆分,使得函数可以拥有一些类能够使用的功能:如state和生命周期等,而且Hook所辅助的函数式编程比较符合React所推崇的组件化编程。
对useState的理解
充当函数中的state,但一次只有一个,不像类中一次指定多个
[text,setText] =useState(‘初始文字’)
useState返回一个数组,数组第一个是想要的state变量,第二个是修改变量的Api
对useEffect的理解
弥补生命周期
接收两个参数:回调函数和依赖数组
useEffect(callBack,[])
调用规则:
每次渲染后:传入回调函数,不传依赖数组:
- useEffect(callBack)
挂载阶段执行一次后不再执行:传入回调函数,且此函数的返回值不是函数,同时传入空数组。
- useEffect(()=>{/*业务逻辑*/},[])
仅在挂载和卸载阶段执行的:传入回调函数,且此函数的返回值是一个函数
1
2
3
4
5
6 useEffect(()=>{
//业务逻辑
//返回一个函数记为B
return ()=>{
}
},[])每次渲染都触发,且卸载阶段也会被触发的:传入回调函数,且这个函数的返回值是一个函数,同时不传第二个参数
1
2
3
4
5
6
7
8 useEffect(()=>{
//A的业务逻辑
//返回一个函数记为B
return ()=>{
}
})上面这段代码在每次渲染都触发A逻辑,并在卸载阶段触发B逻辑
按我的理解,在前面一半写个函数会在渲染阶段一直触发,单纯写一段逻辑就会在挂载阶段触发,在return那写个函数就会在卸载的时候触发
不要在循环,条件或嵌套函数中调用Hook
首次渲染过程
hook相关的所有信息收敛在一个hook对象粒,而hook对象之间以单向链表的形式相互串联,
更新过程
因此,hooks的渲染是通过“依次遍历”(也就是说,它只会管这回需要前进几个next,而不会对对应位置的真实性进行判断)来定位每个hooks的内容的,如果前后两次读到的链表顺序出现差异,那么渲染的结果自然是不可控的。
React学习20220313 Hook